<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Drag & drop</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap" rel="stylesheet">
</head>

<body>
    <section class='stock-watchlist-container'>
        <h2>
            <!-- svg -->
            My Watchlist
        </h2>
        <div id="stocks">
            <article class="stock-row">
                <img class="stock-avatar" src="assets/tesla.png" alt="Tesla">
                <div class="stock-name">
                    <h3>TSLA</h3>
                    <p>Tesla, Inc.</p>
                </div>
                <div class="stock-info">
                    <p class="price">216.61</p>
                    <p class="change">+4.07</p>
                </div>
            </article>
            <!-- more stocks -->
        </div>
    </section>

    <!-- JS scripts -->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script src="script.js"></script>
</body>

</html>